<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>王杰的绘图板</title>

	<style type="text/css">
		div#container{width:100%}
		div#header {background-color:#99bbbb;text-align:center;}
		div#menu {background-color:#ffff99;height:88%;width:20%;float:left;}
		div#content {background-color:#EEEEEE;height:88%;width:80%;float:left;}
		div#footer {background-color:#99bbbb;clear:both;text-align:center;}
		h1 {margin-bottom:0;}
		h2 {margin-bottom:0;font-size:18px;}
		ul {margin:0;}
		li {list-style:none;}
	</style>
	<script src = "one.js"></script>
</head>

<body>
	<div id="container">

		<div id="header">
			<h1>欢迎使用绘图板</h1>
		</div>

		<div id="menu">
			<h2>形状</h2>
			<button id = "segment_f" onclick="segment_f()">线段</button>
			<button id = "rectangle_f" onclick="rectangle_f()">矩形</button>
			<button id = "round_f" onclick="round_f()">圆形</button>
			<button id = "word_f" onclick="word_f()">文本</button>

			<h2>边框</h2>
			<button id = "redpen" onclick="changeColor('red')">红色</button>
			<button id = "yellowpen" onclick="changeColor('yellow')">黄色</button>
			<button id = "bluepen" onclick="changeColor('blue')">蓝色</button>
			<button id = "greenpen" onclick="changeColor('green')">绿色</button>
			<button id = "blackpen" onclick="changeColor('black')">黑色</button>

			<h2>填充</h2>
			<button id = "redfill" onclick="changefillColor('red')">红色</button>
			<button id = "yellowfill" onclick="changefillColor('yellow')">黄色</button>
			<button id = "bluefill" onclick="changefillColor('blue')">蓝色</button>
			<button id = "greenfill" onclick="changefillColor('green')">绿色</button>
			<button id = "white" onclick="changefillColor('#EEEEEE')">白色</button>

			<h2>线宽</h2>
			<button id = "thinpen" onclick="changeThickness(1)">细线</button>
			<button id = "mediumpen" onclick="changeThickness(5)">粗线</button>
			<button id = "thickpen" onclick="changeThickness(10)">最粗</button>
			
			<h2>操作</h2>
			<button id = "draw" onclick="drawok()">绘制</button>
			<button id = "select" onclick="select()">选择</button>
			<button id = "deleteSelect" onclick="deleteSelect()">删除</button>
			<button id = "clearall" onclick="clearall()">清屏</button>
			<!-- <button id = "backdraw" onclick="backdraw()">撤销</button> -->
			<button id = "check" onclick="check()">测试</button>
			
			<h2>文本</h2>
			<input id = "word2" value = "输入文本"/><br/>
			<button id = "wordfill" onclick="wordfill()">实心</button>
			<button id = "wordstroke" onclick="wordstroke()">空心</button>
			<button id = "drawword" onclick="drawword()">输入</button>
			
			<!-- <button id = "draw" onclick="drawok()">绘制</button>
			<button id = "deleteSelect" onclick="deleteSelect()">删除</button>
			<button id = "clearall" onclick="clearall()">清屏</button>
			<button id = "check" onclick="check()">测试</button> -->
		</div>

		<div id="content">
			<canvas id="myCanvas" height=500px width=1050px style="solid #d3d3d3;">
				Your browser does not support the HTML5 canvas tag.
			</canvas>
		</div>

		<div id="footer">Just enjoy it!</div>

	</div>
	
</body>
</html>
